import { useEffect, useState } from 'react'
import { classnames } from '@/utils'
import Link from 'next/link'
import Image from 'next/image'
import { useRouter } from 'next/router'

export default function Menu () {
  const router = useRouter()
  const [currentMenu, setCurrentMenu] = useState('/')

  useEffect(() => {
    setCurrentMenu(router.pathname)
  }, [router])


  const menuList = [
    {id: 1, name: 'index', path: '/'},
    {id: 2, name: 'about us', path: '/about'},
    {id: 3, name: 'philosophy', path: '/philosophy'},
    {id: 4, name: 'funds', path: '/funds'},
    {id: 5, name: 'team', path: '/team'},
    // {id: 6, name: 'portfolio', path: '/portfolio'},
  ]

  return (
    <div className='fixed left-0 right-0 bottom-10 z-50
      md:left-[6vh] md:bottom-[6vh] md:right-auto'>
      <div className='flex-wrap pr-[12vh] hidden md:flex'>
        {
          menuList.map(item => {
            return (
              <Link key={item.id} href={item.path}
                className={classnames("px-3 mr-4 border-2 text-2xl leading-9 mt-3 border-black rounded-full uppercase cursor-pointer pointer",
                  item.path === currentMenu ? "bg-black text-white" : "")
                }
                >{item.name}
              </Link>
            )
          })
        }
        {/* <div className='w-8 h-8 md:w-10 md:h-10 rounded-full bg-black flex justify-center items-center mr-3 md:mt-3' href="aa" target="_blank">
          <Image className='w-6 h-6 md:w-8 md:h-8' width={32} height={32} src="/icon/social_1.png" alt='' />
        </div>
        <div className='w-8 h-8 md:w-10 md:h-10 rounded-full bg-black flex justify-center items-center mr-3 md:mt-3' href="aa" target="_blank">
          <Image className='w-5 h-5 md:w-7 md:h-7' width={28} height={28} src="/icon/social_2.png" alt='' />
        </div>
        <div className='w-8 h-8 md:w-10 md:h-10 rounded-full bg-black flex justify-center items-center mr-3 md:mt-3' href="aa" target="_blank">
          <Image className='w-6 h-6 md:w-8 md:h-8' width={32} height={32} src="/icon/social_3.png" alt='' />
        </div> */}
      </div>
      <div className='md:hidden w-full'>
        <div className='w-full px-5 flex overflow-x-scroll overflow-y-hidden hidden-scrollbar'>
          {
            menuList.map(item => {
              return (
                <Link key={item.id} href={item.path}
                  className={classnames("h-8 px-3 mr-2 border-2 border-black uppercase rounded-full text-xl leading-7 cursor-pointer pointer shrink-0",
                    item.path === currentMenu ? "bg-black text-white" : "")
                  }
                  >{item.name}
                </Link>
              )
            })
          }
        </div>
        {/* <div className='flex items-center mt-3 px-5'>
          <Link className='w-8 h-8 md:w-10 md:h-10 rounded-full bg-black flex justify-center items-center mr-3' href="aa" target="_blank">
            <Image className='w-6 h-6 md:w-8 md:h-8' width={32} height={32} src="/icon/social_1.png" alt='' />
          </Link>
          <Link className='w-8 h-8 md:w-10 md:h-10 rounded-full bg-black flex justify-center items-center mr-3' href="aa" target="_blank">
            <Image className='w-5 h-5 md:w-7 md:h-7' width={28} height={28} src="/icon/social_2.png" alt='' />
          </Link>
          <Link className='w-8 h-8 md:w-10 md:h-10 rounded-full bg-black flex justify-center items-center mr-3' href="aa" target="_blank">
            <Image className='w-6 h-6 md:w-8 md:h-8' width={32} height={32} src="/icon/social_3.png" alt='' />
          </Link>
        </div> */}
      </div>
    </div>
  )
}
